<template>
  <div class="bank-manage-page">
    <div class="edit-header">
      <el-button link class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <span class="edit-title">管理银行卡</span>
    </div>
    <div class="bank-list-section">
      <div
        v-for="(card, idx) in bankCards"
        :key="card.number"
        class="bank-card-item"
        @click="goDetail(card)"
      >
        <div class="bank-card-info">
          <div class="bank-name">{{ card.bank }}</div>
          <div class="bank-number">{{ maskCardNumber(card.number) }}</div>
        </div>
        <div class="bank-card-status">
          <el-tag type="success" size="small">已认证</el-tag>
          <el-icon class="arrow"><ArrowRight /></el-icon>
        </div>
        <el-button link class="delete-btn" @click="removeCard(idx)">删除</el-button>
      </div>
      <el-button class="add-btn" type="primary" @click="goAddPage" plain>+ 添加银行卡</el-button>
    </div>
    <!-- 新增银行卡弹窗 -->
    <el-dialog v-model="showAddDialog" title="添加银行卡" width="320px" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="70px">
        <el-form-item label="银行名称">
          <el-input v-model="addForm.bank" placeholder="请输入银行名称" />
        </el-form-item>
        <el-form-item label="卡号">
          <el-input v-model="addForm.number" placeholder="请输入银行卡号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="addCard">添加</el-button>
      </template>
    </el-dialog>
    <AddBankCardForm
      v-if="showAddForm"
      @back="showAddForm = false"
      @submit="onAddCard"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import AddBankCardForm from './AddBankCardForm.vue'
import { useBankCardStore } from '../stores/bankCardStore'
import { storeToRefs } from 'pinia'

const router = useRouter()
const bankCardStore = useBankCardStore()
const { cards: bankCards } = storeToRefs(bankCardStore)

function goBack() {
  router.back()
}

function goAddPage() {
  router.push('/add-bank-card')
}

const showAddDialog = ref(false)
const showAddForm = ref(false)
const addForm = ref({ bank: '', number: '' })

function addCard() {
  if (!addForm.value.bank || !addForm.value.number) {
    window.ElMessage && window.ElMessage.error('请填写完整信息')
    return
  }
  bankCardStore.addCard({ ...addForm.value })
  addForm.value = { bank: '', number: '' }
  showAddDialog.value = false
}

function removeCard(idx) {
  bankCardStore.removeCard(idx)
}

function goDetail(card) {
  // 只传后四位，实际可传完整卡号或唯一ID
  router.push(`/bank-card-detail/${card.number.slice(-4)}`)
}

function onAddCard(card) {
  bankCardStore.addCard(card)
  showAddForm.value = false
}

function maskCardNumber(number) {
  if (!number) return ''
  // 只显示前6和后4位，中间用*号
  if (number.length <= 10) return number
  return number.slice(0, 6) + '*'.repeat(number.length - 10) + number.slice(-4)
}
</script>

<style scoped>
.bank-manage-page {
  background: #f5f7fa;
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
}
.edit-header {
  display: flex;
  align-items: center;
  padding: 14px 8px 8px 4px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 48px;
}
.back-btn {
  font-size: 1.1em;
  color: #409EFF;
  padding-left: 0;
  margin-right: 8px;
}
.edit-title {
  flex: 1;
  text-align: center;
  font-size: 1.08em;
  font-weight: bold;
  color: #222;
  letter-spacing: 1px;
}
.bank-list-section {
  margin: 0 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 8px 0 18px 0;
  margin-top: 12px;
}
.bank-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 1em;
}
.bank-card-item:last-child {
  border-bottom: none;
}
.bank-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bank-name {
  font-size: 1em;
  color: #222;
}
.bank-number {
  font-size: 0.97em;
  color: #888;
}
.bank-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.arrow {
  color: #bbb;
}
.delete-btn {
  color: #f56c6c;
  font-size: 0.95em;
  margin-left: 10px;
}
.add-btn {
  width: 100%;
  margin-top: 18px;
  font-size: 1.05em;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .bank-manage-page {
    max-width: 100vw;
    border-radius: 0;
    margin: 0;
    padding-bottom: 16px;
  }
  .bank-list-section {
    margin: 0 2px;
    border-radius: 8px;
    padding: 4px 0 12px 0;
  }
  .bank-card-item {
    padding: 10px 6px;
    font-size: 0.98em;
  }
  .add-btn {
    font-size: 1em;
    margin-top: 12px;
  }
}
</style> 